<template>
	<view class="flex-column h100" style="align-items: center;">
		<!-- #ifndef MP-TOUTIAO -->
		<nav-bar title="AI">
<!-- 			<view slot='left'>
				<u-icon name="plus" @click="goAddMessage" size="21"></u-icon>
			</view> -->
		</nav-bar>
		<!-- #endif -->
<!-- 		<view class="padding-cross-10 margin-vertical-10">
			<u-search bgColor="#f0f0f0" :showAction="false" placeholder="搜索" v-model="val"></u-search>
		</view>
		<view class="flex-column margin-vertical-10">
			<user-item :clickFun="goDetailChat" :showFllower="false" :src="globalIcon.headPortrait" :fullname="fullname"
				:username="username">
				<template #right>
					<text>{{curryDate}}</text>
				</template>
			</user-item>
		</view> -->
		<view class="image-border flex center">
			<view v-if="!prevHref" class="flex center" @click="upload">
				<text>点击上传图片</text>
				<u-icon name="photo-fill" size="30"></u-icon>
				</view>
			<image v-else :src="prevHref"></image>
		</view>
		<u-radio-group 
		    v-model="value"
		    placement="row">
			<u-radio
			      :customStyle="{marginBottom: '8px'}"
			      v-for="(item, index) in radiolist1"
			      :key="index"
			      :label="item.name"
			      :name="item.name"
			      @change="radioChange"
			    >
			    </u-radio>
		</u-radio-group>
		<view class="flex" style="column-gap: 4rpx;padding: 0 4rpx;">
			<u-button class="flex1" type="primary" text="转换" @click="upload_img"></u-button>
			<u-button class="flex1" type="primary" text="保存" @click="save"></u-button>
			<u-button class="flex1" type="primary" text="清空" @click="clear"></u-button>
		</view>
		
		<image style="height: 400rpx;padding: 10rpx;width: 97%;" v-if="imghref" :src="imghref"></image>
		<view v-else class="w100 flex1" style="text-align: center;margin-top: 10rpx;display: flex;flex-direction: column;">
			<text>示例图(左边原图,右边转换后,点击可以预览):</text>
			<view @click="previmg" class="flex" style="flex:1;width: 100%;column-gap: 4rpx;padding: 0 6rpx;margin: 0 auto;">
				<image class="flex1 w100 h100" src="https://roseannepark.love/ins_img/2250610388796690216.jpg"></image>
				<image class="flex1 w100 h100" src="https://roseannepark.love/ins_img/6791033101096.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from "@/common/config.js";
	import {randId} from "@/utils/utils.js"
	export default {
		data() {
			return {
				val: '',
				imghref:'',
				prevHref:'',
				isLocal:false,
				value:'日漫风',
				radiolist1: [{
				            name: '日漫风',
				            disabled: false
				          },
				            {
				              name: '3D风',
				              disabled: false
				            },
				            {
				              name: '手绘风',
				              disabled: false
				            }, {
				              name: '素描风',
				              disabled: false
				            },
							{
							  name: '艺术效果',
							  disabled: false
							}
				          ],
			}
		},
		methods: {
			goDetailChat() {
				console.log("跳转");
				uni.navigateTo({
					url: '/pages/chat/chat?channelId=1548452441',
				})
			},
			previmg(){
				uni.previewImage({
					urls:["https://roseannepark.love/ins_img/2250610388796690216.jpg","https://roseannepark.love/ins_img/6791033101096.png"],
					current:1,
					loop:true
				})
			},
			goAddMessage() {
				uni.navigateTo({
					url: "/pages/chat/message-add"
				})
			},
			radioChange(item){
				console.log(item)
				this.value = item;
			},
			upload(){
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sourceType:['album','camera'],
					sizeType:['original', 'compressed'],
					success:(res)=>{
						this.imghref = "";
						this.prevHref = res.tempFiles[0].tempFilePath;
						this.isLocal = true;
					},
					fail:(err)=>{
						console.log('choosemedia err',err)
					}
				})
			},
			clear(){
				this.prevHref = '';
				this.imghref = ''
			},
			upload_img(){
				let manger = wx.getFileSystemManager();
				if(!this.isLocal){
					wx.downloadFile({
						url:this.prevHref,
						success:(res)=>{
							console.log('res tempFilePath',res.tempFilePath)
							manger.readFile({
								filePath:res.tempFilePath,
								encoding:'base64',
								success:async (res)=>{
									console.log(res)
									uni.showLoading({
										title:"正在生成中..."
									})
									try{
										let response = await uni.$u.http.post('/trans',{
											img: res.data,
											types:this.value
										});
										console.log('response',response)
										uni.hideLoading();
										this.imghref = response.data.data[0];
									}catch{
										uni.hideLoading()
									}
								},
								fail:(err)=>{
									console.log('err',err)
								}
							})
						}
					})
				}else{
				manger.readFile({
					filePath:this.prevHref,
					encoding:'base64',
					success:async (res)=>{
						console.log(res)
						uni.showLoading({
							title:"正在生成中..."
						})
						try{
							let response = await uni.$u.http.post('/trans',{
								img: res.data,
								types:this.value
							});
							console.log('response',response)
							uni.hideLoading();
							this.imghref = response.data.data[0];
						}catch{
							uni.hideLoading()
						}
					},
					fail:(err)=>{
						console.log('err',err)
					}
				})
				}
			},
			save(){
				let manger = uni.getFileSystemManager();
				let path = wx.env.USER_DATA_PATH + '/' + randId(10)+ '.png'
				console.log('path',path)
				manger.writeFile({
					filePath: path,
					data: this.imghref.replace('data:image/png;base64,',''),
					encoding:'base64',
					success:(res)=>{
						// console.log(res)
						wx.saveImageToPhotosAlbum({
							filePath:path,
							success:(response)=>{
								console.log(response)
								uni.showToast({
									title:"保存成功",
									icon:"success",
									duration:1000
								})
							},
							fail:(err)=>{
								console.log(err)
								uni.showToast({
									title:"保存失败",
									icon:"error",
									duration:1000
								})
							}
						})
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			}
		},
		onLoad(options){
			console.log('options',options)
			let urls = this.$store.getters.getAiImgs;
			console.log('urls:',urls)
			if(urls.length>0){
				this.prevHref = urls[0];
				this.upload_img();
				this.$store.commit('delAiImg');
			}
		},
		computed: {
			fullname() {
				console.log(this.$store.getters.getUserInfo)
				let info = this.$store.getters.getUserInfo;
				console.log(info.full_name);
				return this.$store.getters.getUserInfo.full_name ?? 'ROSÉ'
			},
			username() {
				return this.$store.getters.getUserInfo.username ?? '暂未发送消息'
			},
			curryDate() {
				let date = new Date();
				return (date.getMonth() + 1) + '月' + date.getDate() + '日';
			},
			picHef(){
				return this.$store.getters.getUserInfo.username + ''
			},
		}
	}
</script>

<style lang="scss" scoped>

.image-border{
	margin: 10rpx auto;
	border: 8rpx dotted #aaa;
	width: 95%;
	height: 400rpx;
	
	image{
		width: 100%;
		height: 100%;
	}
}

.flex-column /deep/ .u-radio-group{
	flex:none;
}

</style>
